<script setup lang="ts">
import { Menu as IconMenu } from "@element-plus/icons-vue";
import { reactive, ref, onMounted, watchEffect } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const items = reactive([
  {
    title: "生产效率",
    children: [
      { title: "实时产量", path: "/Production_statistics" },
      { title: "机加产量", path: "/Production_MS" },
      { title: "历史产量统计", path: "/Production_total" },
      { title: "设备效率", path: "/machine" },
      { title: "各线节拍", path: "/Beat_analysis_MS" },
      { title: "机加节拍", path: "/Beat_MS" },
      { title: "换刀损失", path: "/tool_change" },
      //{ title: "停线损失", path: "/Machine_Fault" },
      { title: "停线故障统计", path: "/fault" },
      { title: "暗灯次数", path: "/andon" },
      { title: "空满位情况", path: "/empty_full" },
    ],
  },
  {
    title: "能耗模块",
    children: [
      { title: "温湿度监控", path: "/temperature" },
      { title: "能耗统计", path: "/Energy_consumption_analysis" },
      { title: "各线能耗标定", path: "/energy" },
      { title: "能耗标定", path: "/energy_standard" },
      { title: "能耗统计表", path: "/Energy_consumption_analysis_table" },
    ],
  },
]);

const active_router = ref(route.path);

onMounted(() => {
  console.log(active_router);
});

const selectMenuItem = (path: string) => {
  active_router.value = path;
  window.sessionStorage.setItem("activerouter", path);
};

watchEffect(() => {
  active_router.value = route.path;
});
</script>

<template>
  <!-- 侧边导航 -->
  <el-aside class="index_class">
    <el-menu :default-active="active_router" router background-color="black" text-color="white">
      <el-sub-menu v-for="group in items" :key="group.title" :index="group.title">
        <template #title>
          <el-icon><icon-menu /></el-icon>
          <span>{{ group.title }}</span>
        </template>
        <el-menu-item
          v-for="item in group.children"
          :key="item.path"
          :index="item.path"
          @click="selectMenuItem(item.path)"
        >
          <span>{{ item.title }}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<style scoped>
.index_class {
  position: relative;
  display: inline-block;
  width: 200px;
  height: calc(100vh);
  background-color: black;
}
.el-menu-item.is-active {
  background-color: #409eff !important; /* 你可以更改为你想要的颜色 */
  color: #fff !important; /* 设置文本颜色 */
}
</style>